<template>
	<view>
		<u-cell-group :border='false'>
			<u-gap height="20" bg-color="#f1f1f1"></u-gap>
			<u-cell-item icon="camera" icon-size='40' title="头像" @click='changePhoto'>
				<u-image slot="right-icon" width="100rpx" height="100rpx" :src="photo"></u-image>
			</u-cell-item>
			<u-cell-item icon="account" icon-size='40' title="姓名" :value='userInfo.name' @click='changeName'>
			</u-cell-item>
			<u-cell-item icon="man" icon-size='40' title="性别" :value='userInfo.sex|getSex' @click='changeSex'>
			</u-cell-item>
			<u-gap height="20" bg-color="#f1f1f1"></u-gap>
			<u-cell-item icon="lock" icon-size='40' title="修改密码" @click="goPage('/pages/shop/changepwd/changepwd')">
			</u-cell-item>
			<u-cell-item icon="phone" icon-size='40' title="更换手机" @click="goPage('/pages/shop/changePhone/changePhone')"
				:value="userInfo.mobile"></u-cell-item>
			<!-- <u-cell-item icon="home" icon-size='40' title="我的物业"
				@click="goPage('/pages/mine/bill/bill')"></u-cell-item> -->
			<u-gap height="20" bg-color="#f1f1f1"></u-gap>
			<u-cell-item icon="info-circle" icon-size='40' @click="goPage('/pages/index/introduction/introduction')"
				title="关于商城">
			</u-cell-item>
		</u-cell-group>
		<u-popup v-model="show" mode='center' border-radius="14">
			<view class="u-p-t-40 u-p-l-40 u-p-r-40" style="width: 600rpx;">
				<view class=" u-font-36 u-text-center">
					修改用户名
				</view>
				<view class="u-m-t-20 u-p-10" style="background-color: #ededed;">
					<u-input v-model="value"/>
				</view>
				<view class="u-flex u-row-around">
					<view class="u-flex-1 u-p-40 u-text-center" @click="show=false">
						取消
					</view>
					<view class="u-flex-1 u-p-40 u-text-center u-light-color" @click="submit">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getByMobile
	} from '@/api/index.js'
	import {
		userUpload,
		userUpdate
	} from '@/api/shop.js'
	import {
		$imgUrl
	} from '@/service/request.js'
	export default {
		name: "w-shop-mine",
		computed: {
			...mapState(['userInfo', 'login']),
			photo() {
				return $imgUrl + this.userInfo.photo
			},
		},
		data() {
			return {
				show: false,
				value:''
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			submit(){
				if(this.value.trim()==''){
					this.$u.toast('用户名不能为空')
					return
				}
				this.userUpdate({
					name: this.value
				})
			},
			changeName(){
				this.show=true
				this.value=this.userInfo.name
			},
			changeSex() {
				const arr = ['男', '女', '保密']
				uni.showActionSheet({
					itemList: arr,
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.userUpdate({
									sex: 1
								})
								break;
							case 1:
								this.userUpdate({
									sex: 2
								})
								break;
							case 2:
								this.userUpdate({
									sex: 0
								})
								break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			getUserInfo() {
				getByMobile({
					mobile: this.userInfo.mobile
				}).then(res => {
					this.$store.commit('setUserInfo', res)
				})
			},
			userUpdate(obj) {
				userUpdate({
					JSESSIONID: uni.getStorageSync('sessionid'),
					id: this.userInfo.id,
					...obj
				}).then(res => {
					this.$u.toast('修改成功')
					this.getUserInfo()
					this.show=false
				})
			},
			changePhoto() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						userUpload(tempFilePaths[0]).then(res => {
							this.userUpdate({
								photo: res.fileurl
							})
						})
					}
				});
			},
			goPage(path, type) {
				if (type == 'login') {
					this.$u.route('/pages/login/login')
					return
				}
				if (this.login == 0) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								this.$u.route('/pages/login/login')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				if (type == 'certification' && this.userInfo.idno) {
					uni.showModal({
						title: '提示',
						content: '已完成实名，是否需要更新？',
						success: (res) => {
							if (res.confirm) {
								this.$u.route(path);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				this.$u.route(path);
				// uni.showModal({
				// 	title: '提示',
				// 	content: '请完善信息',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.goPage('/pages/mine/information/information')
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			}
		}
	}
</script>

<style scoped>

</style>
